<template>
  <div class="page-school-detail">
    <div class="school_detail_container">
      <div class="yx-header">
        <h1 class="yx-title">
          {{schoolDetail.name}}<Icon style="margin-left:10px;" type="ios-home" size="25" />
        </h1>
        <div class="yx-baseinfo">
          <p>院校专业：{{schoolDetail.schoolCollegeMajorName}}&emsp;&emsp;&emsp;所在地：{{schoolDetail.schoolProvinceName}}</p>
          <p>院校层次：{{schoolDetail.schoolEducationLevelName}}</p>
        </div>
      </div>
      <div class="yx-container">
        <div class="yx-index-con">
          <div class="yx-column-title">
            <h3>院校概况</h3>
            <div class="yx-title-border"></div>
          </div>
          <div class="yx-content">
            <p>{{schoolDetail.introduction}}</p>
          </div>
          <div class="yx-column-title">
            <h3>院校简介</h3>
            <div class="yx-title-border"></div>
          </div>
          <div class="yx-content">
            <p v-html="schoolDetail.details"></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions, mapMutations } from "vuex";
import { getSchoolDetail } from "~/api/school";
export default {
  data() {
    return {
      schoolDetail: {},
    };
  },
  created() {
    this.getSchoolDetail();
  },
  mounted() {},
  methods: {
    ...mapMutations(["SET_IS_LOADING"]),
    //获取院校信息
    async getSchoolDetail() {
      this.SET_IS_LOADING(true);
      let id = this.$route.query.id;
      let result = await getSchoolDetail(id);
      if (result && result.data && result.data.code == 200) {
        this.schoolDetail = result.data.data;
      } else {
        this.$Message.error(this.$t("locale.pc.index.t9"));
      }
      this.SET_IS_LOADING(false);
    },
    //   html剔除富文本标签，留下第一段纯文本
    getSimpleText(html) {
      let re1 = new RegExp("<.+?>", "g"); //匹配html标签的正则表达式，"g"是搜索匹配多个符合的内容
      let msg = html.replace(re1, ""); //执行替换成空字符
      let msg2 = msg.split("=");
      let msg3 = msg2.filter((i, x) => i != "")[0];
      return msg3;
    },
    //格式化时间
    trimDate(date) {
      if (date) {
        let _date = new Date(date);
        return `${_date.getFullYear()}-${_date.getMonth() +
          1}-${_date.getDate()}`;
      } else {
        return "";
      }
    },
  }
};
</script>
<style lang="scss">
.page-school-detail {
  @import "assets/css/richtext.scss";
}
</style>
<style lang="scss" scoped>
.page-school-detail {
  width: 100%;
  background: #ffffff;
  .school_detail_container {
    width: 1200px;
    margin: 0 auto;
    .yx-header {
      width: 100%;
      height: 200px;
      .yx-title {
        color: #333;
        font-size: 25px;
        font-weight: 400;
        line-height: 28px;
        padding: 54px 0 25px;
      }
      .yx-baseinfo {
        font-size: 14px;
        line-height: 38px;
      }
    }
    .yx-container {
      width: 100%;
      .yx-index-con {
        padding-top: 25px;
        .yx-column-title {
          position: relative;
          height: 60px;
          width: 1200px;
          border-bottom: 1px solid #e5e5e5;
          h3{
            line-height: 58px;
            font-size: 22px;
            font-weight: 400;
            text-align: center;
          }
          .yx-title-border {
            width: 90px;
            height: 0;
            margin: 0 auto;
            border-bottom: 3px solid var(--theme-color);
          }
        }
        .yx-content{
          box-sizing: border-box;
          padding: 20px;
          font-size: 16px;
          line-height: 24px;
          min-height: 200px;
        }
      }
    }
  }
}
</style>
